<!-- 三层嵌套数据 -->
 <template>
  <div>
    <el-button @click="loadNestedData">加载多层嵌套数据</el-button>

    <div ref="chart" style="width: 350px; height: 200px"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data () {
    return {
      mycart: null
    };
  },
  methods: {
    initChart () {
      this.mycart = echarts.init(this.$refs.chart);//初始化echarts实例
      this.mycart.setOption({});//指定的配置项和数据显示图表
    },


    loadNestedData () {
      const nestedData = [
        {
          "satellite": "Satellite A",
          "observations": [
            {
              "observationId": "Obs1",
              "positions": [
                { "date": "2023-01-01", "altitude": 120 },
                { "date": "2023-01-02", "altitude": 200 },
                { "date": "2023-01-03", "altitude": 150 }
              ]
            },
            {
              "observationId": "Obs2",
              "positions": [
                { "date": "2023-01-01", "altitude": 180 },
                { "date": "2023-01-02", "altitude": 220 },
                { "date": "2023-01-03", "altitude": 160 }
              ]
            }
          ]
        },
        {
          "satellite": "Satellite B",
          "observations": [
            {
              "observationId": "Obs1",
              "positions": [
                { "date": "2023-01-01", "altitude": 140 },
                { "date": "2023-01-02", "altitude": 190 },
                { "date": "2023-01-03", "altitude": 170 }
              ]
            },
            {
              "observationId": "Obs2",
              "positions": [
                { "date": "2023-01-01", "altitude": 130 },
                { "date": "2023-01-02", "altitude": 180 },
                { "date": "2023-01-03", "altitude": 165 },
                { "date": "2023-01-04", "altitude": 200 }
              ]
            }
          ]
        }
      ];
      this.updateChart(nestedData);
    },
    updateChart (data) {
      let xData = new Set();
      let seriesList = [];

      data.forEach(satellite => {
        satellite.observations.forEach(observation => {
          let yData = [];
          observation.positions.forEach(position => {
            xData.add(position.date);
            // if (!xData.includes(position.date)) {
            //   xData.push(position.date);
            // }
            yData.push(Number(position.altitude));
          });

          seriesList.push({
            name: `${satellite.satellite} - ${observation.observationId}`,
            data: yData,
            type: 'line'
          });
        });
      });
      xData = Array.from(xData);
      this.mycart && this.mycart.setOption({
        legend: {
          scrollData: true // 启用滚动
        },
        tooltip: {
          trigger: 'axis', // 坐标轴触发
        },
        xAxis: {
          type: 'category',
          data: xData
        },
        yAxis: {
          type: 'value'
        },
        series: seriesList
      });
    }
  },
  mounted () {
    this.initChart();
  }
};
</script>

<style scoped>
/* 添加一些样式 */
</style> 



